<template>
  <div class="app-container">
    <!-- <div class="chart" ref="chart" /> -->
    <div class="top-title">
              <div>实验开出率</div>
              <div class="btn-search top-title" @click="showDialog()">
                <span>筛选</span>
                <img class="down-icon" src="../../assets/images/arrow down.png" alt="">
              </div>
            </div>
                <div class="chart" ref="chart" />
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <!-- <el-form-item label="名称" prop="courseName">
            <el-select v-model="queryParams.courseId" clearable placeholder="请选择名称">
            <el-option v-for="dict in testOptions" :key="dict.id" :label="dict.testName" :value="dict.id"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="学段" prop="coursePeriod">
            <el-input v-model="queryParams.coursePeriod" placeholder="请输入" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item> -->
          <el-form-item label="地区" prop="courseArea">
            <!-- <el-input v-model="queryParams.courseArea" placeholder="请输入" clearable style="width: 240px" @keyup.enter="handleQuery" /> -->
            <el-cascader
              clearable
              filterable
              placeholder="省/市"
              :options="provinceList"
              :props="cityProps"
              v-model="queryParams.courseArea"
              popper-class="pc-sel-area-cascader"
            />
          </el-form-item>
          <!-- <el-form-item label="授课学校" prop="courseDept">
            <el-select v-model="queryParams.courseDept" placeholder="请选择学校" clearable >
              <el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学科" prop="courseSubject">
            <el-input v-model="queryParams.courseSubject" placeholder="请输入" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item> -->
          <!-- <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item> -->
        </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog> 
  </div>
</template>

<script setup name="PieChart" lang="ts">
import * as echarts from 'echarts';
import { chartByArea, } from '@/api/core/home';
const { proxy } = getCurrentInstance();

const props = defineProps({
    list:{
        type: Array,
        default:''
    }
})
const provinceList = ref([]);
// 监听 courseArea 的变化
watch(() => props.list, (newVal, oldVal) => {
  // 如果 courseArea 发生变化，
  console.log('监听省市===',newVal)
  provinceList.value = newVal;
},{
  immediate:true,
  deep:true
});

const emit = defineEmits(["updataArea",  "delItemClick", "popClose"])
import cityData from '@/assets/json/pca-code.json';
const addRessList = ref(cityData);
const cityProps = reactive({
  emitPath: false,
  value: 'code', //指定选项的值为addresslist对象的code属性
  label: 'name', //指定选项标签为addresslist对象的name属性
  children: 'children' //指定选项的子选项为addresslist对象的children属性
});

const dialog = reactive<DialogOption>({
  visible: false,
  title: '筛选'
});
const queryParams = {
    courseArea: undefined, //地区
    courseDept: undefined,//学校
    courseSubject: undefined,//学科
    params: {}
};

const showDialog = async () => {
  dialog.visible = true;
}
/** 搜索按钮操作 */
const submitForm = async () => {
  dialog.visible = false;
  await getList();
  //修改父组件中courseArea值
  emit('updataArea',queryParams.courseArea)
};
/**取消 */
const cancel = async () => {
  dialog.visible = false;
  // queryParams.courseArea = undefined
};

const getList = async () => {
  // loading.value = true;
  console.log('====',queryParams);
  const res = await chartByArea(queryParams);
  const list = res.data;
  const areaList = [];
  const chartData = [];
  //处理返回键值对数据
  Object.keys(list).forEach(key => {
    console.log(key + ': ' + list[key]);
    let name = '';
    const index = key.indexOf(":");
    if(index != -1){
      name = key.substring(index+1) +' '+list[key];;
    }
    // const name = key.replace(new RegExp(":", 'g'), '')+' '+list[key];
    areaList.push(name);
    chartData.push({value:list[key].replace(new RegExp("%", 'g'), ''),name:name})
    
  });
  console.log('实验开出率',res.data,areaList,chartData);
  let chart = echarts.init(proxy.$refs.chart);
  chart.setOption({
    legend: {
      show:true,
		  type:'plain',
		  right:'0',
		  top:'middle',
		  width:120,

      bottom: "0%", // 图例组件离容器底部的距离
      itemWidth: 10, // 图例标记的图形宽度
      itemHeight: 10, // 图例标记的图形高度
      data: areaList,
      // ["实验一中", "实验二中", "实验三中", "实验四中", "实验五中"], // 图例的数据数组
      textStyle: {
      
        fontSize: "12" // 图例文字大小
      }
    },
    toolbox: {
      trigger: 'item'
    },
    series: [
      {
        name: '出课率', // 系列名称
        type: 'pie', // 系列类型
        radius: ['30%', '60%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径
        avoidLabelOverlap: false, // 是否启用防止标签重叠策略
        center: ['35%', '50%'],
        label: {
          show: false, // 是否显示标签
          position: ' center ' // 标签的位置
        },
        emphasis: {
          label: {
            show: true, // 高亮时是否显示标签
            fontSize: 12, // 高亮时标签字体大小
            fontWeight: 'bold' // 高亮时标签字体粗细
          }
        },
        labelLine: {
          show: false // 是否显示标签的视觉引导线
        },
        data: chartData
        // [
        //   { value: 1, name: '实验一中' },
        //   { value: 4, name: '实验二中' },
        //   { value: 2, name: '实验三中' },
        //   { value: 2, name: '实验四中' },
        //   { value: 1, name: '实验五中' }
        // ]
      }
    ]
  });
}

onMounted(() => {
  getList();

  
});
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  .chart {
    width: 100%;
    height: 300px;
  }
}
.top-title{
  font-size: 20px;
  color: #141414;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn-search{
    font-size: 14px;
    color: #999999;
    padding: 0 10px;
    width: 100px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    .down-icon{
      width: 12px;
      height: 6px;
    }
  }
}
</style>
